<template>
  <div class="tabbar_box">
    <van-tabbar v-model="active" :active-color="selectedColor" :inactive-color="color" fixed>
      <van-tabbar-item v-for="(item, index) in list" :key="index" :name="item.pagePath" @click="jumpPage(index)">
        <template #icon>
          <van-icon :name="item.icon" />
        </template>
        {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue';
import { useRouter } from 'vue-router';
import { tabBar } from '@/constants'

const router = useRouter();
let list = unref(tabBar).list

const { color, selectedColor } = tabBar
const active = ref('/home')

function jumpPage(index: number) {
  router.replace({
    path: list[index].pagePath,
  })
}
</script>

<style lang="scss" scoped>

</style>